<template>
  <view class="content">
    <text>选择照片切割模式</text>
    <radio-group class="model-group" @change="valueChange">
      <label v-for="item in 3" class="model-item">
        <view class="model-table">
          <view class="model-table-item" v-for="table in item*3"></view>
        </view>
        <view class="">
          <radio :value="item*3" :checked="item==3" />
        </view>
      </label>
    </radio-group>
    <button type="primary" @click="chooseImage">选择照片</button>
    <canvas canvas-id="userImage"
      :style="{width: '1000px', height: '1000px',position:'fixed', left: '9999px', top: '9999px'}" id="canvas"></canvas>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'

  const showMessage = ref(false)
  const message = ref('')
  const height = ref(0)
  const width = ref(0)
  const canvasShow = ref(true)
  const modelType = ref(9)

  function valueChange(evt) {
    modelType.value = evt.detail.value
  }

  function chooseImage() {
    uni.chooseImage({
      count: 1,
      sizeType: ['original'],
      success: async (res) => {
        uni.getImageInfo({
          src: res.tempFilePaths[0],
          success: (i) => {
            width.value = i.width
            height.value = i.height
            createImage(i.path)
          }
        })

        uni.showToast({
          title: '已裁剪并保存',
          duration: 2000
        })
      },
      fail: (err) => {
        if (err.code != -2) {
          uni.showToast({
            title: '出错了？',
            icon: 'error'
          })
        }
        uni.hideLoading()
      }
    })
  }

  function createImage(file) {
    const query = uni.createSelectorQuery()
    query.select('#canvas').boundingClientRect()
    query.exec(can => {
      // 确定图片比例
      let w, h
      if (width.value >= height.value) {
        w = can[0].width
        h = height.value * w / width.value
      } else {
        h = can[0].height
        w = width.value * h / height.value
      }

      // 开始绘制图片
      const ctx = uni.createCanvasContext('userImage')
      ctx.save()
      ctx.drawImage(file, 0, 0, w, h)
      ctx.save()
      console.log(222);
      ctx.draw(true, () => {
        // 切图
        for (let y = 0; y < modelType.value / 3; y++) {
          for (let x = 0; x < 3; x++) {
            console.log(x * w / 3, y * h / 3);
            uni.canvasToTempFilePath({
              x: x * w / 3,
              y: y * h * 3 / modelType.value,
              width: w / 3,
              height: h * 3 / modelType.value,
              canvasId: 'userImage',
              success: (res) => {
                // console.log(res)
                uni.saveImageToPhotosAlbum({
                  filePath: res.tempFilePath,
                  fail: (err) => {
                    uni.showToast({
                      title: err.message,
                      icon: 'error'
                    })
                  }
                })
              },
              fail: (err) => {
                console.log(err);
              }
            })
          }
        }
      })
    })
    uni.hideLoading()
  }
</script>

<style lang="scss" scoped>
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20rpx;

    .model-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 20rpx;
      padding: 10rpx 40rpx;

      .model-item {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        align-self: stretch;
        gap: 20rpx;

        .model-table {
          display: flex;
          flex-wrap: wrap;
          width: 300rpx;
          height: 300rpx;
          overflow: hidden;
          border: 1px solid #ccc;

          .model-table-item {
            box-sizing: border-box;
            width: 33.333333333%;
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;

            &:nth-of-type(3n) {
              border-right: none;
            }

            &:nth-last-of-type(-n+3) {
              border-bottom: none;
            }
          }
        }
      }
    }
  }
</style>